
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<base href="<%=basePath%>">
		<!--[if lte IE 6]></base><![endif]-->
		<title>广东科学技术职业学院考生报到系统<s:property
				value="%{#session.college.collegesName}" />
		</title>
		<link href="css/newindex.css" rel="stylesheet" type="text/css" />

		<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="js/excanvas.min.js"></script><![endif]-->
		<script src="js/jquery-1.5.js" language="javascript">
</script>
		<script src="js/newpublic.js" language="javascript">
</script>
		<script src="js/table.js" language="javascript">
</script>

		<script src="js/jquery-ui-1.8.5.custom.min.js" language="javascript">
</script>
		<script src="js/visualize.jQuery.js" language="javascript">
</script>
		<link rel="stylesheet" href="css/jquery-ui-1.8.5.custom.css"
			type="text/css" />
		<link rel="stylesheet" href="css/visualize.jQuery.css" type="text/css"></link>

		<style type="text/css">
.statisticsdata td,th {
	text-align: center;
	border: 1px solid #ddd;
	padding: 2px 5px;
	font-size: 1.0em;
	padding: 2px;
	width: 8%;
	height: 30px
}

.statisticsdata td,th {
	background-color: #f4f4f4;
}

.statisticsdata th {
	background-color: #E5E4FF;
}

.visualize-bar {
	margin-left: auto;
	margin-right: auto;
	margin-top: 70px;
	/*margin-bottom: 200px*/
}
.visualize .visualize-info {
	top: -60px;
}
legend { font-size: 3.2em; }
</style>
		<script language="javascript">
$(function() {

	//make some charts
	//$('#Statisticsdata').visualize({type: 'pie', pieMargin: 10, title: '2009 Total Sales by Individual'});	
	//$('#Statisticsdata').visualize({type: 'line'});
	//$('#Statisticsdata').visualize({type: 'area'});

});

$(function() {
	$("#content").draggable({cancel:".contable"});
	$('#Statisticsdata').visualize({height:300,colors:["#B0F274","#FF9E7A"]});
	var result=<s:property value='result' escape="false"/>;
	fillResult(result)
	//加载学院下拉列表
	loadColleges();
	//初始化专业下拉列表
	loadProfession($("#collegesList").val())
	$("#collegesList").change(function() {

		loadProfession($("#collegesList").val())
		$("#professionsList").trigger("change")
		//初始化班级列表
			loadClasses($("#professionsList").val())
			$("#professionsList").change(function() {
				loadClasses($("#professionsList").val())
			})
			/*$("select").each(function() {//全部默认选择第一项
						$(this).children().first().attr("selected", "selected")

			})*/

		})
	initChartTitle()
})
//加载学院下拉列表
function loadColleges() {
	var colleges=<s:property value="colleges" escape="false"/>
			
			$("select#collegesList option").remove();
			setTimeout(function(){//ie6不得不这样写
				$("#collegesList").append("<option value=''>全部学院</option>")
				for(c in colleges){
					$("select#collegesList").append("<option value='"+c+"'>"+colleges[c]+"</option>")
				}
				$("#collegesList").trigger("change")
			},0.001)
			
		}
		function loadProfession(collegeId){
			$("select#professionsList option").remove();
			var professionMap=<s:property value="professions" escape="false"/>
			var professions=professionMap[collegeId];
			$("#professionsList").append("<option value=''>所有专业</option>")
			for(var p in professions){
				$("#professionsList").append("<option value='"+p+"'>"+professions[p]+"</option>")
			}
		}
		function loadClasses(professionId){
			var classes=<s:property value="classes" escape="false"/>
			$("#classesList option").remove();
			$("#classesList").append("<option value='0'>全部班级</option>")
			for(var i=1;i<=classes[professionId];i++){
				$("#classesList").append("<option value='"+i+"'>"+i+"</option>")
			}
		}
		function loadInfo(){
			var professionId=$("#professionsList").val();
			var collegeId=$("#collegesList").val();
			var clazz=$("#classesList").val();
			var subjectId=$("#subject").val();
			var param={};
			if(professionId!=""){
				param.professionId=professionId;
			}
			if(collegeId!=""){
				param.collegeId=collegeId;
			}
			if(clazz!=""){
				param.clazz=clazz;
			}
			if(subjectId!=""){
				param.subjectId=subjectId;
			}
			$.post("json/scoreStatisticsAction",param,function(data){
					initChartTitle()
					fillResult(eval("("+data.result+")"))
			})
		}
		//初始化图表的标题
		function initChartTitle(){
		
			var professionId=$("#professionsList").val();
			var collegeId=$("#collegesList").val();
			var clazz=$("#classesList").val();
			var subjectId=$("#subject").val();
			
			var title="";
			var collegeName=$.trim($("#collegesList option:selected").html());
			var professionName=$.trim($("#professionsList option:selected").html());
			var clazzName=$.trim($("#classesList option:selected").html());
			var subject=$.trim($("#subject option:selected").html());
			if(collegeId!=""){
				title+=collegeName+" ";
			}
			if(professionId!=""){
				title+=professionName+" ";
			}
			if(clazz!=0){
				title+=clazzName+"班 ";
			}
			if(subjectId!=""){
				title+=subject;
			}
			$("#chartTitle").html(title+"分数段统计")
		}
		
		function fillResult(data){
			
			var j=0;
			$.each(data,function(i,v){
				$("tr#scoreRange th:eq("+j+")").html(i);
				$("tr#totalNumber td:eq("+j+")").html(v.all)
				$("tr#registedNumber td:eq("+j+")").html(v.registed)
				j++;
			})
		
			$('.visualize').trigger('visualizeRefresh');

		}
</script>
	</head>
	<body onload="fixPNGAll()">

		<div id="bg">
			<div id="bodydiv">
				<div id="bodytitle">
					学生处
					<div>
						<a href="loginoutAction" style="color: #F00;">退出</a>
					</div>
				</div>

				<div id="menudiv">
					<div class="menu">
						<div style="position: relative;">
							<a href="studentOfficeAction"><img
									src="newimages/l3.png" width="48" height="48" border="0" />
								<div>
									学校报到率
								</div> </a>
						</div>
					</div>
					<div class="menu">
						<div style="position: relative;">
							<a href="studentCollegeAction"><img
									src="newimages/l1.png" width="46" height="47" border="0" />
								<div>
									学院报到率
								</div> </a>
						</div>
					</div>
					<div class="menu">
						<div style="position: relative;">
							<a href="studentProfessionAction"><img
									src="newimages/l2.png" width="48" height="48" border="0" />
								<div>
									专业报到率
								</div> </a>
						</div>
					</div>
					<div class="menu">
						<div style="position: relative;">
							<a href="studentStudentAction"><img
									src="newimages/class.png" width="48" height="48" border="0"
									style="margin-top: 5px;" />
								<div style="margin-top: -10px;">
									学生报到信息
								</div> </a>
						</div>
					</div>
					<div class="menu">
						<div style="position: relative;">
							<a href="departmentScoreStatisticsAction"><img
									src="newimages/menu2.png" width="40" height="46" border="0" />
								<div>
									分数统计
								</div> </a>
						</div>
					</div>
				</div>
		<div id="content">
			<!--当前位置CSS-->
			<div class="top">
				<div class="topleft">
					<div class="dan">
								<div>
									当前位置>学生处>分数统计
								</div>
							</div>
					<div class="F5">
						<img src="newimages/F5.png" />
					</div>
				</div>
				<div class="topright">
					<div class="toprightmin"></div>
					<div class="toprightmax"></div>
					<div class="toprightclose">
						<div class="toprightclose" onclick="if(confirm('是否确定退出！')){location.replace('loginoutAction')}" title="点击退出" title="点击退出"></div>
				</div>
			</div>
			</div>
			<!---->
			<!--内容-->
			<div class="condiv">
	
	
					<div class="submenu">
			
					</div>
					<div class="contable">
						<table width="100%" id="d1" border="0">
							<tr>
								<td width="15%" align="right">
									学院：
								</td>
								<td width="10%">
									<select name="" id="collegesList">

									</select>
								</td>
								<td width="15%" align="right">
									专业名称:
								</td>
								<td width="16%">
									<select name="" id="professionsList">
										<option value="">
											--请选择学院--
										</option>
									</select>
								</td>

								<td align="right">
									班级：
								</td>
								<td>
									<select name="" id="classesList">
										<option value="0">
											--请选择专业--
										</option>
									</select>
								</td>
								<td align="right">
									科目：
								</td>
								<td>
									<s:select list="subjects" theme="simple" listKey="subjectsId" listValue="subjectsName" id="subject" headerKey="" headerValue="所有科目">
									</s:select>
								</td>
								<td>
									<input type="button" value="查找 " onclick="loadInfo()"/>
								</td>
						

							</tr>
						</table>

						<div style="height: 800px;margin-top: 60px">
							<table id="Statisticsdata"
								style="background-color: white; margin-left: auto; margin-right: auto; width: 800px; height: 100px; margin-top: auto"
								class="statisticsdata">
								<caption id="chartTitle" style="font-size: 20px;color: red">
									分数段统计
								</caption>

								<tr id="scoreRange">
									<td style="width: 600px"></td>
									<th>
										400分以上
									</th>
									<th>
										391-400
									</th>
									<th>
										381-390
									</th>
									<th>
										371-380
									</th>
									<th>
										361-370
									</th>
									<th>
										351-360
									</th>
									<th>
										371-380
									</th>
									<th>
										361-370
									</th>
									<th>
										351-360
									</th>
									<th>
										351-360
									</th>

								</tr>

								<tr id="totalNumber">
									<th>
										总人数
									</th>
									<td>
										190
									</td>
									<td>
										200
									</td>
									<td>
										40
									</td>
									<td>
										120
									</td>
									<td>
										30
									</td>
									<td>
										300
									</td>
									<td>
										120
									</td>
									<td>
										30
									</td>
									<td>
										300
									</td>
									<td>
										300
									</td>
								</tr>
								<tr id="registedNumber">
									<th width="500px">
										已报到人数
									</th>
									<td>
										10
									</td>
									<td>
										40
									</td>
									<td>
										30
									</td>
									<td>
										45
									</td>
									<td>
										35
									</td>
									<td>
										49
									</td>
									<td>
										30
									</td>
									<td>
										45
									</td>
									<td>
										35
									</td>
									<td>
										35
									</td>
								</tr>

							</table>
						</div>
			
				</div>
			</div>

			<div class="condiv"
				style="width: 997px; position: relative; height: 20px; min-height: 20px; text-align: center;">
				<a href="computer/computer.html" target="_blank">计算机学院程序员之家</a>
			</div>
			<!---->


			<!--低部-->
			<div class="bottom">
			</div>

		</div>

	</body>
</html>
